<!--  -->
<template>
  <div id="baseFromTemplate">
    <c-title :hide="false" :text="plugin_name"> </c-title>
    <div style="margin: 0.875rem;">
      <van-form @submit="onSubmit">
        <van-field
          v-for="(item,index) in formList"
          :key="item.name"
          v-model="item.model"
          :readonly="item.readonly"
          :name="item.name"
          :label="item.label"
          :placeholder="item.placeholder"
          :rules="item.rules"
          @click="item.click(item,index)"
        >
          <template #input v-if="item.uploader">
            <van-uploader v-model="fileList" :after-read="onRead" :max-count="1"/>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        value-key='name'
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <!-- 街道地址 -->
    <yd-cityselect v-model="addressShow"
                   :callback="addressCallback"
                   :items="area"></yd-cityselect>
    <van-popup v-model="streetShow" position="bottom" :style="{ width: '100%',height:'80%',overflow:auto  }" round :close-on-click-overlay="false">
      <van-cell :border="false" title-style="text-align:left" is-link  :key='i'  v-for="(item,i) in districtVal"  @click.native="streetConfirm(item)">
        <span slot="title">{{item.areaname}}</span>
        <span slot="default"></span>
    </van-cell>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      plugin_name: '',
      objValue: {},
      showPicker: false,

      addressShow: false,
      area: district,//省市区数据
      streetShow: false,
      districtVal: [],

      fileList: [],

      columns: [],
      formList: [{
        name: 'level_id',
        label: '申请等级',
        readonly: true,
        placeholder: '请输入身份等级',
        rules: [{
          required: true
        }],
        click: (item,index) => {
          this.activeClickName = item.name;
          this.activeClickIndex = index;
          this.showPicker = true;
        }
      },{
        name: 'corporate_name',
        label: '公司名称',
        placeholder: '请输入公司名称',
        rules: [{
          required: true
        }],
        click: () => {}
      },{
        name: 'enterprise_code',
        label: '企业代码',
        placeholder: '请输入企业代码',
        rules: [{
          required: true
        }],
        click: () => {}
      },{
        name: 'juridical_person',
        label: '法人代表',
        placeholder: '请输入法人代表',
        rules: [{
          required: true
        }],
        click: () => {}
      },{
        name: 'contacts',
        label: '联系人',
        placeholder: '请输入联系人',
        rules: [{
          required: true
        }],
        click: () => {}
      },{
        name: 'mobile',
        label: '联系电话',
        placeholder: '请输入联系电话',
        rules: [{
          required: true
        }],
        click: () => {}
      },{
        name: 'account',
        label: '对公账户',
        placeholder: '请输入对公账户',
        rules: [{
          required: true
        }],
        click: () => {}
      },{
        name: 'bank',
        label: '开户行',
        placeholder: '请输入开户行',
        rules: [{
          required: true
        }],
        click: () => {}
      },{
        name: 'area',
        label: '开户地址',
        placeholder: '请输入开户地址',
        readonly: true,
        rules: [{
          required: true
        }],
        click: (item,index) => {
          this.activeClickName = item.name;
          this.activeClickIndex = index;
          this.addressShow = true;
        }
      },{
        name: 'address',
        label: '详情地址',
        placeholder: '请输入详情地址',
        rules: [{
          required: true
        }],
        click: () => {}
      },{
        uploader: true,
        name: 'business_license',
        label: '营业执照',
        placeholder: '请上传营业执照',
        rules: [{
          required: true,
          message: '请上传营业执照'
        }],
        click: (item,index) => {
          this.activeClickName = item.name;
          this.activeClickIndex = index;
        }
      }]
    };
  },
  components: {},

  computed: {},

  created() {
    this.getData();
  },

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get('plugin.tx-team-performance.frontend.controllers.member.index',{},".");
      if (result == 0) return this.$toast(msg);
      this.plugin_name = data.plugin_name;
      if(data.need_sign) {
        return this.$dialog.confirm({
          title: '您尚未签订协议',
          message: `需要签订协议后，才可进行填写${this.plugin_name}身份等级申请信息`,
          confirmButtonText: '去签署',
          cancelButtonText: '返回上一页',
        }).then(() => {
          return this.$router.push(this.fun.getUrl("shopSignIndexV2",{scene: 5}));//需要先签署合同
        }).catch(() => {
          if (window.history.length <= 1) {
            this.$router.replace(this.fun.getUrl("member"));
          } else {
            this.$router.go(-1);
          }
        });
      }
      if(data.wait) {
        return this.$dialog.alert({
          title: '等待审核',
          message: `您的身份申请正在审核中，请耐心等待审核`,
          confirmButtonText: '返回',
        }).then(() => {
          if (window.history.length <= 1) {
            this.$router.replace(this.fun.getUrl("member"));
          } else {
            this.$router.go(-1);
          }
        });
      }

      this.fun.setWXTitle(this.plugin_name);
      this.columns = data.levels;
    },
    async onSubmit(e){
      let json = {...e,...this.objValue};
      let { result, msg, data } = await $http.post('plugin.tx-team-performance.frontend.controllers.member.apply',json,".");
      if (result == 0) return this.$toast(msg);
      this.$router.replace(this.fun.getUrl("member"));
    },
    onConfirm(e){
      this.formList[this.activeClickIndex].model = e.name;
      this.objValue[this.activeClickName] = e.id;
      this.showPicker = false;
    },
    // 地址回调
    addressCallback(obj) {
      let addressName = obj.itemName1 + " " + obj.itemName2 + " " + obj.itemName3;

      this.formList[this.activeClickIndex].model = addressName;
      // this.objValue[this.activeClickName] = {
      //   province_id: obj.itemValue1,
      //   city_id: obj.itemValue2,
      //   district_id: obj.itemValue3
      // };
      this.objValue.province_id = obj.itemValue1;
      this.objValue.city_id = obj.itemValue2;
      this.objValue.district_id = obj.itemValue3;

      this.getStreet(obj.itemValue3);
    },
    streetConfirm(item) {
      this.formList[this.activeClickIndex].model = this.formList[this.activeClickIndex].model + " " +item.areaname;
      // this.objValue[this.activeClickName].street_id = item.id;
      this.objValue.street_id = item.id;
      this.streetShow = false;
    },
    // 获取街道
    getStreet(param) {
      $http
        .get("member.memberAddress.street", { district_id: param })
        .then(response => {
          if (response.result === 1) {
            if (response.data && response.data.length > 0) {
              this.districtVal = response.data;
              this.streetShow = true;
            }
          } else {
            this.streetShow = false;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    onRead(e) {
      this.$toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      axios
        .post(this.fun.getRealUrl("upload.uploadPic"), fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          let responseData = response.data;
          if (responseData.result === 1) {
            this.$toast.clear();
            this.fileList = [];
            this.fileList.push({
              url: responseData.data.img_url
            });
            this.objValue[this.activeClickName] = responseData.data.img;
            // this.formList[this.activeClickIndex].model = [];
            // this.formList[this.activeClickIndex].model.push(responseData.data.img_url);
          } else {
            this.$toast.clear();
            this.$toast(responseData.msg);
          }
        })
        .catch(error => {
          this.$toast.clear();
          console.log(error);
        });
    }
  }
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
</style>